<template>
    
    <div style="padding-bottom: 42px">

        <div v-if="approveList.length > 0" class="swrap" style="width: 100%">
            
            <div class="spiece_flex" v-for="(item, index) in approveList" :key="index">

                <div class="vertical-a-t display-ib" style="width: 25px; margin-top: 4px;">
                    <i v-if="index == 0" class="iconfont icon-current font16 color-red2"></i>
                    <i v-else class="iconfont icon-yiban font16 color-theme"></i>
                    <div v-if="index != approveList.length - 1" class="optionline"></div>
                </div>

                <div class="vertical-a-t display-ib" style="width: calc(100%)">
                    <div style="white-space: nowrap; margin-top: 2px;">
                        <span class="color-theme font14"> {{ item.producerName || "暂无" }}：</span>
                        <span class="color-2 font14"> {{ item.content || "暂无" }} </span>
                    </div>

                    <div class="mt05 color-8" style="display: flex; align-items: baseline">
                        <div class="display-ib vertical-a-t font12" style="width: 100%; margin-bottom: 3px">
                            {{ item.companyName + ' - ' + item.departmentName || "暂无" }}
                        </div>
                        <div class="display-ib vertical-a-t font12 text-r" style="margin-left: 10px; margin-bottom: 3px; text-align: right; width: 100%;">
                            {{ item.modifiedTime || "暂无" }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-else>
            <div class="color-9 font12 text-c">暂无数据</div>
        </div>

    </div>
</template>

<script>

export default {
    props: {

        approveList: {
            type: Array,
            default: () => [],
        }
    }
}

</script>


<style lang="less" scoped>
.approve {
    padding: 10px;
    background: #fff;

    .approve-item {
        display: flex;
        justify-content: space-between;
    }

    .img-box {
        width: 5%;
        position: relative;

        .icon {
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #00a1e9;
        }

        .line {
            display: inline-block;
            width: 2px;
            color: #ccc;
            height: 65%;
            position: absolute;
            top: 15px;
            left: 7px;
        }
    }

    .text-box {
        width: 95%;

        .name {
            color: #00a1e9;
        }

        .message {
            margin-top: 10px;
            color: #979797;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>

